import React, { Component } from 'react'
import classNames from 'classnames'
import moment from 'moment'

export default class List extends Component {
  render() {
    const { list, active, handleDelete, handleZan } = this.props
    const tempList = [...list]
    // 当 active 等于 hot 根据热度(id)排序，等于 time 的时候根据时间排序
    if (active === 'hot') {
      // 不能直接修改传递过来的数据
      // list.sort()
      tempList.sort((item1, item2) => item2.id - item1.id)
    } else {
      tempList.sort((item1, item2) => item2.time - item1.time)
    }
    return (
      <div className='comment-list'>
        {/* //!一定记得换成 tempList */}
        {tempList.length === 0 ? (
          <h2>暂无评论</h2>
        ) : (
          tempList.map((item) => (
            <div key={item.id} className='list-item'>
              <div className='user-face'>
                <img className='user-head' src={item.img} alt='' />
              </div>
              <div className='comment'>
                <div className='user'>{item.author}</div>
                <p className='text'>{item.comment}</p>
                <div className='info'>
                  <span className='time'>
                    {moment(item.time).format('YYYY-MM-DD HH:mm:ss')}
                  </span>
                  {/* <span className={`like ${item.attitude === 1 ? 'liked' : ''}`}> */}
                  {/* // !#2. 子组件调用传递过来的方法，并传递实参 */}
                  <span
                    className={classNames('like', {
                      liked: item.attitude === 1,
                    })}
                    onClick={() =>
                      handleZan(item.id, item.attitude === 1 ? 0 : 1)
                    }
                  >
                    <i className='icon'></i>
                  </span>
                  {/* // !#2. 子组件调用传递过来的方法，并传递实参 */}
                  <span
                    className={`hate ${item.attitude === -1 ? 'hated' : ''}`}
                    onClick={() =>
                      handleZan(item.id, item.attitude === -1 ? 0 : -1)
                    }
                  >
                    <i className='icon'></i>
                  </span>

                  <span
                    className='reply btn-hover'
                    onClick={() => handleDelete(item.id)}
                  >
                    删除
                  </span>
                </div>
              </div>
            </div>
          ))
        )}
      </div>
    )
  }
}
